<template>
  <van-tabbar route safe-area-inset-bottom>
    <van-tabbar-item replace :to="routerPaths.home" icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item replace :to="routerPaths.projects" icon="apps-o">Projects</van-tabbar-item>
    <van-tabbar-item replace :to="routerPaths.user" icon="setting-o">User</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { routerPaths } from '@/router'

export default defineComponent({
  name: 'AnToolbar',
  setup() {
    return {
      routerPaths: reactive(routerPaths),
    }
  },
})
</script>
